<template>
	<view>
		<mysearch></mysearch>
		<view class="scrollwrap" :style="{height: ctxHeight + 'px'}">
			<scroll-view scroll-y="true" class="scrollleft">
				<!-- 一级分类 -->
				<view class="leftitem" @tap="change(index)" :class="index == ind ? 'active' : ''"
					v-for="item,index in catelist" :key="item.cat_id">
					{{item.cat_name}}
				</view>
			</scroll-view>
			<scroll-view scroll-y="true" class="scrollright">
				<view v-for="item in result" :key="item.cat_id">
					<!-- 二级分类 -->
					<view class="cattitle">{{item.cat_name}}</view>
					<!-- 三级分类 -->
					<view class="catchild">
						<view class="childitem" @tap="goto(ele.cat_id)" v-for="ele in item.children" :key="ele.cat_id">
							<image class="img" :src="ele.cat_icon"></image>
							<text class="nameitem">{{ele.cat_name}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

	</view>
</template>

<script>
	import {
		getCate
	} from '../../utils/http.js'
	export default {
		data() {
			return {
				catelist: [], // 所有分类
				ind: 0, // 默认下标
				result: [], //右边展示的二级和三级分类
				ctxHeight: null, // 分类滚动区域的高度
			}
		},
		methods: {
			change(index) {
				this.ind = index
				this.result = this.catelist[index].children;
				console.log(this.result);
			},
			goto(cid) {
				console.log(cid);
				// 跳转到普通页面
				uni.navigateTo({
					url: "/pages-other/goodslist/goodslist?cid=" + cid
				})
			}
		},
		onLoad() {
			// 请求分类数据

			getCate().then(res => {
				console.log(res);
				this.catelist = res.data.message
				this.result = this.catelist[this.ind].children;

			})

			// 获取可视窗口的高度
			// uni.getSystemInf()         异步  不阻塞代码，在最后执行
			// uni.getSystemInfoSync()    同步  按照js顺序 执行
			// windowHeight    可使用窗口的高度
			// 搜索子组件的高度56
			console.log(uni.getSystemInfoSync().windowHeight - 56);
			this.ctxHeight = uni.getSystemInfoSync().windowHeight - 56;
		}
	}
</script>

<style lang="scss">
	.scrollwrap {
		display: flex;

		.scrollleft {
			flex: 3;
			// height: 78vh;

			.leftitem {
				width: 100%;
				padding: 30rpx 0;
				text-align: center;
				border-left: 8rpx solid transparent;
			}

			.active {
				background-color: #fff;
				border-color: #c00;
			}
		}

		.scrollright {
			background-color: #fff;
			flex: 7;

			.cattitle {
				text-align: center;
				font-size: 40rpx;
				margin: 20rpx;
			}

			.catchild {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				width: 100%;

				.childitem {
					width: 33%;
					box-sizing: border-box;
					padding: 40rpx 24rpx;

					.img {
						width: 100%;
						height: 100rpx;
					}

					.nameitem {
						display: inline-block;
						width: 100%;
						text-align: center;
						font-size: 26rpx;
					}
				}

			}
		}
	}
</style>
